import React, { Component } from 'react'
import PaginationTable from 'components/PaginationTable'
import { actions } from 'mirrorx';
import { Button, Message, Modal, Dropdown, Menu, ButtonGroup, Popconfirm, Upload } from 'tinper-bee';
import { FormattedMessage, injectIntl } from 'react-intl';
import Grid from 'components/Grid';
import DelModal from 'components/DelModal';
import ApproveSteps from 'components/ApproveSteps';
import { PurchaseApprovalButton } from 'components/PurchaseApproval';
import {PrintButton} from 'components/Print';
import Alert from 'components/Alert';
import 'react-viewer/dist/index.css';
import SearchAreaForm from '../SearchArea';
import CreateCustomer from '../CreateCustomer';
import GetDealModal from '../GetDealModal';
import AcExport from '../Export';
import { deepClone, getPageParam } from "utils";
import { mainTableColumn, headerButtonSets, columnButtonSets, SelectCode } from '../InitTemplate';
import './index.less'
const { Item } = Menu;

class ExpenseConfirmationPaginationTable extends Component {
    constructor(props) {
        super(props);

        let self = this;
        this.state = {
            // 表格中所选中的数据，拿到后可以去进行增删改查
            showModal: false,
            ModalVisible: false,
            selectData: [],
            parentDetalList:{}
        }
        if (mainTableColumn[mainTableColumn.length - 1].title !== "操作") {
            mainTableColumn.push(
                {
                    title: "操作",
                    dataIndex: "d",
                    key: "d",
                    width: 100,
                    fixed: "right",
                    render(text, record, index) {
                        return (
                            <div className='operation-btn'>
                                {columnButtonSets.detail && <i title="详情" size='sm' className='uf uf-search' onClick={() => { self.cellClick(record, 2) }}></i>}
                                {columnButtonSets.delete && record.isEnable == 1 && record.state == 0 &&
                                    <Popconfirm
                                        trigger="click"
                                        placement="left"
                                        content={"确定删除吗？"}
                                        onClose={() => { self.delSingle(record) }}
                                    >
                                        <i title="删除" size='sm' className='uf uf-del'></i>
                                    </Popconfirm>
                                }
                                {columnButtonSets.edit && record.state == 0 && record.isEnable == 1 && <i title={"修改"} size='sm' className='uf uf-pencil-s edit-btn' onClick={() => { self.cellClick(record, 1) }}></i>}
                            </div>
                        )
                    }
                }
            )
        }


    }

    componentWillMount(){
        actions.ExpenseConfirmation.getAuth();
    }

    componentDidMount() {
        actions.ExpenseConfirmation.loadList(this.props.queryParam);//table数据
        if (SelectCode && SelectCode.length > 0) {
            actions.ExpenseConfirmation.getSelectData(SelectCode);
        }
        // mainTableColumn.unshift();
    }
    /**
     * 编辑,详情，增加
     */



    cellClick = async (record, btnFlag) => {
        if(btnFlag == 1) {
            let authCodeList = JSON.parse(sessionStorage.getItem("ExpenseConfirmation") || "[]");
            if(authCodeList.indexOf("Confirmationedit") == -1) {
                Message.create({ content: "请先开通编辑权限", color: 'warning', duration: 10 });
                return;
            }
        }
        await actions.ExpenseConfirmation.updateState({
            rowData: {},
        });

        let id = "";
        if (record) {
            id = record["id"];
        }
        actions.routing.push(
            {
                pathname: 'ExpenseConfirmation-edit',
                search: `?search_id=${id}&btnPageFlag=${btnFlag}`
            }
        )
    }

    getDealCallback = async (res) => {
        await actions.ExpenseConfirmation.updateState({
            rowData: res,
        });
        actions.routing.push(
            {
                pathname: 'ExpenseConfirmation-edit',
                search: `?btnPageFlag=0&getDealFlag=true`
            }
        )
    }

    

    // 提交失败回调函数
    onSubmitFail = (error) => {
        actions.ExpenseConfirmation.updateState({ showLoading: false });
        Message.create({ content: error.msg, color: 'danger', duration: 10 });

    }

    // 模态框确认删除
    onModalDel = async (delFlag) => {
        let { selectData } = this.state;

        if (delFlag) {
            let currentButton = columnButtonSets["delete"];
            let param = {
                data: { id: selectData.id || "1" },
                header: {
                    url: currentButton.url,
                    method: currentButton.method,
                    ContentType: currentButton.ContentType
                }
            }
            actions.ExpenseConfirmation.ButtonSetsModel(param);
            this.setState({
                showModal: false
            })
        }

    }

    freshData = (pageIndex) => {
        this.onPageSelect(pageIndex, 0);
    }

    /**
     *
     * @param {*} index 跳转指定页数
     * @param {*} value 设置一页数据条数
     */
    onDataNumSelect = (index, value) => {
        this.onPageSelect(value, 1);
    }

    /**
     *
     * @param {Number} value  pageIndex 或者 pageIndex
     * @param {Number} type 为0标识为 pageIndex,为1标识 pageSize
     */
    onPageSelect = (value, type) => {
        let queryParam = deepClone(this.props.queryParam);
        queryParam['pageParams'] = getPageParam(value, type, queryParam.pageParams);
        this.setState({ selectedIndex: 0 }); //默认选中第一行
        actions.ExpenseConfirmation.loadList(queryParam);
    }

    /**
     *
     * @param {*} selectData 点击多选框回调函数
     */
    getSelectedDataFunc = (selectData, record, index) => {
        this.setState({ selectData });
        let { list } = this.props;
        let _list = deepClone(list);
        //当第一次没有同步数据
        // if (this.oldData.length == 0) {
        //     this.oldData = deepClone(list);
        // }
        //同步list数据状态
        if (index != undefined) {
            _list[index]['_checked'] = !_list[index]['_checked'];
        } else {//点击了全选
            if (selectData.length > 0) {//全选
                _list.map(item => {
                    if (!item['_disabled']) {
                        item['_checked'] = true
                    }
                });
            } else {//反选
                _list.map(item => {
                    if (!item['_disabled']) {
                        item['_checked'] = false
                    }
                });
            }
        }
        //queryDetailObj.list = _list;
        actions.ExpenseConfirmation.updateState({ list: _list });
        this.forceUpdate()
    }

    /**
     * 关闭修改model
     */
    onCloseEdit = () => {
        this.setState({ editModelVisible: false, btnFlag: -1 });
    }

    // 单个删除操作
    delItem = (record) => {
        if (record.isEnable == 1) {
            Message.create({ content: "启用状态数据不能删除", color: 'warning', duration: 10 });
            return;
        }

        this.setState({
            ModalVisible: true,
            delSingle: true,
            singleSelectData: record
        });
    }

    //新增
    ButtonAdd = () => {
        actions.routing.push(
            {
                pathname: 'ExpenseConfirmation-edit',
                search: `?btnPageFlag=${0}`
            }
        )
    }

    //复制
    ButtonCopy = () => {
        let { selectData } = this.state;
        actions.routing.push(
            {
                pathname: 'ExpenseConfirmation-edit',
                search: `?search_id=${selectData[0].id}&btnPageFlag=${3}`
            }
        )
    }


    //提交
    ButtonSubmit = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let param = {
            data: selectData,
            header: {
                url: currentButton.url,
                method: currentButton.method,
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //审批
    ButtonApprove = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let param = {
            data: selectData,
            header: {
                url: currentButton.url,
                method: currentButton.method,
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //取消审批
    ButtonCancelApprove = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let param = {
            data: selectData,
            header: {
                url: currentButton.url,
                method: currentButton.method,
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //审批驳回
    ButtonRejectApprove = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let param = {
            data: selectData,
            header: {
                url: currentButton.url,
                method: currentButton.method,
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //启用
    ButtonEnable = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let ids = selectData.map(item => {return item.id});
        let param = {
            data: {
                ids: ids.join(",") || "1"
            },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //停用
    ButtonDisable = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let ids = selectData.map(item => {return item.id});
        let param = {
            data: {
                ids: ids.join(",") || "1"
            },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //批量删除
    ButtonBatchDel = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let param = {
            data: selectData,
            header: {
                url: currentButton.url,
                method: currentButton.method,
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    
    //批量标记支付
    ButtonSignPay = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let ids = selectData.map(item => {return item.id});
        let param = {
            data: {
                key:'1',
                ids:ids.join(",")
            },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }
    
    //批量取消标记支付
    ButtonDisSignPay = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let ids = selectData.map(item => {return item.id});
        let param = {
            data: {
                key:'0',
                ids:ids.join(",")
            },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }
    
    //批量标记签收
    ButtonSignReceive = () => {
        let { selectData, currentButtonSetsIndex } = this.state;
        let currentButton = headerButtonSets[currentButtonSetsIndex];
        let ids = selectData.map(item => {return item.id});
        let param = {
            data: {
                ids:ids.join(",")
            },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
    }

    //操作按钮 打开弹框
    openAlert = (index) => {
        return () => {
            let { selectData } = this.state;
            if (selectData.length > 1 && !headerButtonSets[index].batch) {
                Message.create({ content: '不支持批量', color: 'warning', duration: 10 });
                return;
            }
            if (headerButtonSets[index].event == "ButtonAdd") {
                this.ButtonAdd();
                this.setState({ currentButtonSetsIndex: index });
            } else {
                if (selectData.length == 0) {
                    Message.create({ content: '请选择一条数据', color: 'warning', duration: 10 });
                    return;
                }
                this.setState({
                    ModalVisible: true,
                    currentButtonSetsIndex: index,
                    modalContent: headerButtonSets[index].modalContent
                });
            }
        }
    }

    delSingle = (singleSelectData) => {
        let authCodeList = JSON.parse(sessionStorage.getItem("ExpenseConfirmation") || "[]");
        if(authCodeList.indexOf("Confirmationdel") == -1) {
            Message.create({ content: "请先开通删除权限", color: 'warning', duration: 10 });
            return;
        }
        let currentButton = columnButtonSets["delete"];
        let param = {
            data: { ids: singleSelectData.id || "1" },
            header: {
                url: currentButton.url,
                method: currentButton.method,
                ContentType: currentButton.ContentType
            }
        }
        actions.ExpenseConfirmation.ButtonSetsModel(param);
        this.setState({
            delSingle: false

        })
    }

    //同步NCC
    syncNCC = () => {
        let { selectData } = this.state;
        if (selectData.length > 1) {
            Message.create({ content: '不支持批量', color: 'warning', duration: 10 });
            return; 
        } else {
            actions.ExpenseConfirmation.syncNCC(selectData[0].id); }
    }

    //弹框关闭回调
    confirmGoBack(type) {
        this.setState({ ModalVisible: false });
        let { delSingle } = this.state;
        if (delSingle) {
            this.delSingle();
            return;
        }
        if (type === 1) { // 确定
            const { currentButtonSetsIndex } = this.state;

            let currentButtonSets = headerButtonSets[currentButtonSetsIndex];

            let buttonSets = {
                "ButtonCopy": this.ButtonCopy,
                "ButtonSubmit": this.ButtonSubmit,
                "ButtonApprove": this.ButtonApprove,
                "ButtonRejectApprove": this.ButtonRejectApprove,
                "ButtonCancelApprove": this.ButtonCancelApprove,
                "ButtonEnable": this.ButtonEnable,
                "ButtonDisable": this.ButtonDisable,
                "ButtonBatchdel": this.ButtonBatchDel,
                "ButtonSignPay": this.ButtonSignPay,
                "ButtonDisSignPay": this.ButtonDisSignPay,
                "ButtonSignReceive": this.ButtonSignReceive

            }
            buttonSets[currentButtonSets.event]();
        }
    }

    //渲染按钮集合
    renderButtonSets = () => {
        let dom = [];
        let self = this;
        //let {authCodeList} = this.props;
        let authCodeList = JSON.parse(sessionStorage.getItem("ExpenseConfirmation") || "[]");
        headerButtonSets.forEach((item, index) => {
            if(authCodeList.indexOf(item.authcode) != -1) {
                dom.push(
                    <Button key={item.event} colors={item.color || "default"} shape='border' onClick={self.openAlert(index)} style={{ "marginLeft": 15 }} size='sm' >
                        {item.zhname}
                    </Button>)
            }
        })
        return dom;
    }

    //批量收藏单据
    collectBill = () => {
        let { selectData } = this.state;
        if(selectData&&selectData.length>0){
            let data = {ids:selectData.map(item => {return item.id})};
            actions.ExpenseConfirmation.collectBill({data:data,callback:(res)=>{
                if(res.status==1) {
                    Message.create({ content: res.message, color: 'danger', duration: 10 });
                    return;
                }else{
                    Message.create({ content: res.message, color: 'success', duration: 10 });
                    return;
                }
            }});
        }else {
            Message.create({ content: "至少选择一条要收藏的单据！", color: 'warning', duration: 10 });
            return;
        }
    }

    //批量收藏单据
    cancelCollectBill = () => {
        let { selectData } = this.state;
        if(selectData&&selectData.length>0){
            let data = {ids:selectData.map(item => {return item.id})};
            actions.ExpenseConfirmation.cancelCollectBill({data:data,callback:(res)=>{
                if(res.status==1) {
                    Message.create({ content: res.message, color: 'danger', duration: 10 });
                    return;
                }else{
                    Message.create({ content: res.message, color: 'success', duration: 10 });
                    return;
                }
            }});
        }else {
            Message.create({ content: "至少选择一条要取消收藏的单据！", color: 'warning', duration: 10 });
            return;
        }
    }

    //校验是否支付
    checkPayStatus = () => {
        let { selectData } = this.state;
        if(selectData&&selectData.length==1){
            if(selectData[0].state!=3){
                Message.create({ content: "只能选择审核通过的单据查验是否支付！", color: 'danger', duration: 10 });
                return;
            }
            let data = {
                billCode:selectData[0].billcode,
                organizationId:selectData[0].organizationId,
                billTypeCode:selectData[0].settlementCode,
            };
            actions.ExpenseConfirmation.checkPayStatus({data:data,callback:(res)=>{
                if(res.status==1) {
                    Message.create({ content: res.message, color: 'danger', duration: 10 });
                    return;
                }else{
                    Message.create({ content: res.message, color: 'success', duration: 10 });
                    return;
                }
            }});
        }else if(selectData&&selectData.length>1){
            Message.create({ content: "只能选择一条单据查验是否支付！", color: 'warning', duration: 10 });
            return;
        }else{
            Message.create({ content: "请选择数据进行查验！", color: 'warning', duration: 10 });
            return;
        }
    }

    openGetDealModal = (type,param={}) => {
        if(type == "ActivityProgram") {
            param.url = '/occ-fee/fee/activity-scheme/activityScheme-feeConfirm';
            actions.ExpenseConfirmation.getTargetDealList({param,callback:(res)=>{
                this.setState({
                    showGetDealModal: true,
                    parentDetalList: res,
                    openFlag:"ActivityProgram",
                });
            }});
        }else {
            param.url = '/occ-fee/fee/activity-scheme/find-share-bill-confirm';
            actions.ExpenseConfirmation.getTargetDealList({param,callback:(res)=>{
                this.setState({
                    showGetDealModal: true,
                    parentDetalList: res,
                    openFlag:"ActivityProgramShare",
                });
            }});
        }
    }

    closeGetDealModal = () => {
        this.setState({
            showGetDealModal: false
        });
    }

    ButtonApprovalCal = (data) => {
        actions.ExpenseConfirmation.loadList(this.props.queryParam);
        this.setState({ selectData: [] });
    }

    openCreateCustomer = () => {
        let { selectData } = this.state;
        if (!selectData || selectData.length == 0) {
            Message.create({ content: '请先选择一条数据', color: 'warning', duration: 10 });
            return;
        }
        if (selectData[0].isEnable != 1) {
            Message.create({ content: '请选择已启用单据', color: 'warning', duration: 10 });
            return;
        }
        if (selectData.length>10){
            Message.create({ content: '请选择十条及十条以内的单据停用', color: 'warning', duration: 10 });
            return;
        }
        this.setState({
            showCreateCustomerModal: true,
            selectData: selectData,
        });
    }

    closeCreateModal = () => {
        this.setState({
            showCreateCustomerModal: false
        });
    }

    beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isJpgOrPng) {
            Message.create({ content: "只能上传excel文件", color: 'warning', duration: 10 });
            return;
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            Message.create({ content: "文件大小不能最大 2MB!", color: 'warning', duration: 10 });
        }
        return isJpgOrPng && isLt2M;
    }

    onFileChange = (info) => {
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
            let res = info.file.response;
            let files = info.file;
            const fileReader = new FileReader();

            fileReader.onload = event => {

                try {

                    const { result } = event.target;
                    const workbook = XLSX.read(result, { type: 'binary' });
                    let data = [];
                    for (const sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        }

                    }
                    message.success('上传成功！')

                } catch (e) {
                    message.error('文件类型不正确！');

                }

            };
            fileReader.readAsBinaryString(files[0]);

        } else if (info.file.status === 'error') {
            
        }
    }

    querySelfBill = () => {
        let param = this.props.queryParam;
        let personData = JSON.parse(localStorage.getItem("loginUserInfo")||"{}");
        if(personData&&personData.appUser){
            param.whereParams["marrk"] = "{\"refpk\":\""+personData.appUser.id+"\",\"refcode\":\""+personData.appUser.id+"\",\"refname\":\""+personData.appUser.name+"\"}";
            actions.ExpenseConfirmation.loadList(param);
        }
    }

    render() {
        const self = this;
        let { list, showLoading, pageIndex, pageSize, totalPages, total, queryParam } = this.props;
        let authCodeList = JSON.parse(sessionStorage.getItem("ExpenseConfirmation") || "[]");
        let { showModal, selectData, ModalVisible, modalContent, showGetDealModal, showCreateCustomerModal } = this.state;
        let exportProps = { total, pageIndex, pageSize, selectData, list, queryParam,authCodeList};

        let formatMessage = this.props.intl.formatMessage;

        //同步NCC
        let syncNCCFlag = (selectData.length > 0 && selectData[0].customerTypeCode != 1) ? false : true;

        let paginationObj = {   // 分页
            activePage: pageIndex,//当前页
            total: total,//总条数
            size:pageSize,
            items: totalPages,
            freshData: this.freshData,
            onDataNumSelect: this.onDataNumSelect,
        }

        let sortObj = {
            mode: 'multiple',
            backSource: true
        }

        //文件上传
        // const fileUpload = {
        //     name: 'fileList',
        //     action: '/iuap-saas-filesystem-service/file/upload',     //上传地址
        //     data: { 
        //         groupname: rowData.id, 
        //         filepath: rowData.id + new Date(), 
        //         url: true, 
        //         isreplace: false 
        //     },
        //     headers: {
        //     },
        //     accept: ".xlsx,.xls",
        //     showUploadList: false,
        //     beforeUpload: this.beforeUpload,
        //     onChange: this.onFileChange
        // };

        let submitFlag = selectData.length > 0 && selectData[0].fstatusflag == 1 && selectData[0].fstatusflag != 7;
        let bpmService = {
            "ButtonSubmit": {
                url: `/occ-fee/fee/confirms/batch/submit?billCode=billcode`,
                code: "0",  //自由
                field: "state",
                authCode: "Confirmationsubmit",
            },
            "ButtonCallback": {
                url: `/occ-fee/fee/confirms/batch/taskback`,
                code: "1",
                field: "state",
                authCode: "Confirmationreject",
            },
            "ButtonApprove": {
                url1: `/occ-fee/fee/confirms/batch/complete?billCode=billcode`,
                url: `/occ-fee/fee/confirms/batch/judgeProcess`,
                code: "1,2",
                field: "state",
                authCode: "Confirmationapprove",
            },
            "ButtonCancelApprove": {
                url: `/occ-fee/fee/confirms/batch/withdrawtask`,
                code: "2",
                field: "state",
                authCode: "Confirmationcancel",
            },
            "CheckApprove": {
                url: `/occ-cmpt/bpm/processoper/historictasks`,
                code: "0,1,2,3",
                field: "state",
                authCode: "Confirmationsubmit",
            }
        }

        const menu2 = (
            <Menu>
                {authCodeList.indexOf("Confirmmake")!==-1 && <Item key="0">
                    <div onClick={this.ButtonAdd}>自制预提冲销</div>
                </Item>}
                <Item key="1">
                    <div onClick={()=>this.openGetDealModal("ActivityProgram")}>参照决裁申请单新增</div>
                </Item>
                <Item key="2">
                    <div onClick={()=>this.openGetDealModal("ActivityProgramShare")}>参照决裁共享单新增</div>
                </Item>
            </Menu>
        );

        return (
            <div className='ExpenseConfirmation-root'>
                <SearchAreaForm
                    {...this.props}
                />
                <div className='button-header'>
                    <Dropdown 
                    overlay={menu2}
                    animation="slide-up"
                    >
                        <Button shape='border' style={{"marginLeft":15}} colors="primary" size='sm' >
                            新增
                        </Button>
                    </Dropdown>
                    {<Button
                        onClick={this.querySelfBill}
                        shape='border'
                        style={{ "marginLeft": 15 }}
                        size='sm'
                    >
                        我的请求
                    </Button>}
                    {this.renderButtonSets()}
                    {authCodeList.indexOf("Confirmationstop")!==-1 &&<Button
                        onClick={this.openCreateCustomer}
                        shape='border'
                        style={{ "marginLeft": 15,"marginRight":15 }}
                        size='sm'
                    >
                        停用
                    </Button>}
                    {<Button
                        onClick={this.collectBill}
                        shape='border'
                        style={{ "marginLeft": 15 }}
                        size='sm'
                    >
                        收藏单据
                    </Button>}
                    {<Button
                        onClick={this.cancelCollectBill}
                        shape='border'
                        style={{ "marginLeft": 15 }}
                        size='sm'
                    >
                        取消收藏
                    </Button>}
                    {<Button
                        onClick={this.checkPayStatus}
                        shape='border'
                        style={{ "marginLeft": 15 }}
                        size='sm'
                    >
                        是否支付
                    </Button>}
                    <PurchaseApprovalButton
                        selectData={selectData}
                        // billType="30"
                        // printTemplateId="0001Z8100000000CYA2V"
                        ButtonApprovalCal={this.ButtonApprovalCal}
                        authCodeList={authCodeList}
                        modalName = "ExpenseConfirmation"
                        bpmService={bpmService}
                    />
                    <PrintButton 
                        authCode="ExpenseConfirmation"
                        baseUrl="/occ-fee/fee/confirms"
                        selectData={selectData}
                    />
                    {authCodeList.indexOf("9901-05-03-05")!==-1 && <Button
                        disabled={syncNCCFlag}
                        onClick={this.syncNCC}
                        shape='border'
                        style={{ "marginLeft": 15 }}
                        size='sm'
                    >
                        同步NCC
                    </Button>}
                    
                    {/* <Upload {...fileUpload}>
                        <Button shape="border" style={{ "marginLeft": 15 }}>导入</Button>
                    </Upload>*/}
                    <AcExport {...exportProps} className="ml5" /> 
                </div>
                <div className="table-wrapper">
                    <Grid
                        ref={(el) => this.grid = el} //存模版
                        data={list}
                        rowKey={(r, i) => i}
                        columns={mainTableColumn}
                        scroll={{ y: 450 }}
                        getSelectedDataFunc={this.getSelectedDataFunc}
                        paginationObj={paginationObj}
                        //multiSelect={{ type: "radio" }}
                        showHeaderMenu={true}
                        sort={sortObj} //后端排序
                        loading={{ show: showLoading, }}
                        BigDataTable={true}
                        sheetHeader={{ height: 30, ifshow: false }}
                    />
                </div>
                <Modal
                    show={showModal}
                >
                    <Modal.Header>
                        <Modal.Title><FormattedMessage id="js.com.Ind.0025" defaultMessage="删除" /></Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <FormattedMessage id="js.com.Del1.0002" defaultMessage="确认要删除么？" />
                    </Modal.Body>

                    <Modal.Footer>
                        <Button onClick={() => this.onModalDel(false)} style={{ marginRight: 50 }}><FormattedMessage id="js.Ref.Ref224.0012" defaultMessage="关闭" /></Button>
                        <Button onClick={() => this.onModalDel(true)} ><FormattedMessage id="js.com.Pas.0005" defaultMessage="确定" /></Button>
                    </Modal.Footer>
                </Modal>

                <CreateCustomer
                    showCreateCustomerModal={showCreateCustomerModal}
                    selectData={this.state.selectData}
                    closeCreateModal={this.closeCreateModal}
                />

                <GetDealModal
                    showGetDealModal={showGetDealModal}
                    parentList={this.state.parentDetalList.content}
                    origalData={this.state.parentDetalList}
                    getDealCallback={this.getDealCallback}
                    openFlag={this.state.openFlag}
                    openGetDealModal={this.openGetDealModal}
                    closeGetDealModal={this.closeGetDealModal}
                />

                <Alert show={ModalVisible}
                    context={modalContent || "确定操作吗？"}
                    confirmFn={() => {
                        this.confirmGoBack(1);
                    }}
                    cancelFn={() => {
                        this.confirmGoBack(2);
                    }}
                />
            </div>

        )

    }
}

export default injectIntl(ExpenseConfirmationPaginationTable)